<template>
  <div class="history-panel" :class="{ 'history-panel-open': isOpen }">
    <div class="history-header">
      <h3 class="text-lg font-semibold text-gray-800">历史记录</h3>
      <button @click="$emit('close')" class="text-gray-500 hover:text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="history-content">
      <div v-if="records.length === 0" class="empty-state">
        <p class="text-gray-500">暂无历史记录</p>
      </div>
      <div v-else class="history-list">
        <div 
          v-for="(record, index) in records" 
          :key="index" 
          class="history-item"
          @click="$emit('select', record)"
        >
          <div class="history-item-content">
            <div class="history-item-header">
              <span class="history-item-date">{{ formatDate(record.timestamp) }}</span>
              <span class="history-item-options">
                {{ formatOptions(record.options) }}
              </span>
            </div>
            <div class="history-item-text">
              <p class="history-item-input">{{ truncateText(record.input) }}</p>
              <p class="history-item-output">{{ truncateText(record.output) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="history-footer">
      <button 
        @click="$emit('clear')" 
        class="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
        :disabled="records.length === 0"
      >
        清空历史
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  records: {
    type: Array,
    default: () => []
  },
  isOpen: {
    type: Boolean,
    default: false
  }
});

defineEmits(['close', 'select', 'clear']);

const truncateText = (text) => {
  if (!text) return '';
  return text.length > 50 ? text.substring(0, 50) + '...' : text;
};

const formatDate = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp);
  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
};

const formatOptions = (options) => {
  if (!options) return '';
  
  const activeOptions = [];
  if (options.toUpperCase) activeOptions.push('大写');
  if (options.toLowerCase) activeOptions.push('小写');
  if (options.trimSpaces) activeOptions.push('去空格');
  if (options.removeNewlines) activeOptions.push('去换行');
  if (options.reverseText) activeOptions.push('反转');
  if (options.camelCase) activeOptions.push('驼峰');
  if (options.fishDoc) activeOptions.push('鱼皮格式');
  
  return activeOptions.join(', ');
};
</script>

<style scoped>
.history-panel {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;
  background-color: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: left 0.3s ease;
}

.history-panel-open {
  left: 0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.history-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.history-footer {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.history-item:hover {
  background-color: #f3f4f6;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.history-item-date {
  font-size: 0.75rem;
  color: #6b7280;
}

.history-item-options {
  font-size: 0.75rem;
  color: #4b5563;
  font-style: italic;
}

.history-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item-input {
  font-size: 0.875rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-output {
  font-size: 0.875rem;
  color: #1f2937;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>